<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>minivue</title>
  </head>
  <body>
    <div id="app">
      <h1>插值表达式</h1>
      <h3>{{msg}}</h3>
      <h3>{{count}}</h3>
      <h1>v-text</h1>
      <div v-text="msg"></div>
      <h1>v-model</h1>
      <input type="text" v-model="msg" />
      <input type="text" v-model="count" />


      <br/>
      <br/>
      <br/>

      <div v-html="my"></div>

      <button  v-on:click="console.log('v-on:click')">v-on</button>
      <button @click="handleClick">v-on简写@</button>
      <script src="js/dep.js"></script>
      <script src="js/watcher.js"></script>
      <script src="js/compiler.js"></script>
      <script src="js/observer.js"></script>
      <script src="js/vue.js"></script>
      <script>
        let vm = new Vue({
          el: "#app",
          data: {
            msg: "hello",
            count: "123",
            persion: {
              name: "zs",
            },
            my:'<div style="color: red">这是个html</div>'
          },
          methods:{
            handleClick(){
              console.log('v-on简写@')
            }
          }
        });
        console.log(vm.msg)
        // vm.msg = { test: "fff" };
        vm.msg = "fff";
      
      </script>
    </div>
  </body>
</html>
